import { ref, reactive } from 'vue';

import { FormSchema } from '/@/components/Table';
import { getDictTypeListApi } from '/@/api/admin/dict';
import { DICT } from '/@/enums/dict';
import { UpdateTypeList, updateTypeMap } from '/@/enums/modelEnum';
import { getOptionsResource } from '/@/api/admin/resoure';
import {
  getTableModelTypeTreeApi,
  getDBTableNamesApi,
  MODEL_TYPE,
} from '/@/api/config-center/model-design';
import { MODE } from '/@/components/CodeEditor';

import { getMenuTree } from '/@/api/admin/menu';
import { getDBListApi } from '/@/api/database/account';
import { useDebounceFn } from '@vueuse/core';
// import { Empty, Input, Form, FormItem, Switch, Checkbox, Select, Slider } from 'ant-design-vue';

const displayTypeList = ref<any[]>([]);
const componentsTypeList = ref<any[]>([]);

export const titleColumns = (classify) => {
  if (classify === MODEL_TYPE.LIST) {
    getDictTypeListApi({
      type: DICT.MODEL_DISPLAY_TYPE,
    }).then((res) => {
      if (displayTypeList.value.length <= 0) {
        res.forEach((el) => {
          el.value = el.intValue;
        });
        displayTypeList.value = res;
      }
    });
  } else {
    getDictTypeListApi({
      type: DICT.COMPONENT_TYPE,
    }).then((res) => {
      if (componentsTypeList.value.length <= 0) {
        res.forEach((el) => {
          el.value = el.intValue;
        });
        componentsTypeList.value = res;
      }
    });
  }

  const list = [
    {
      label: '名称',
      dataIndex: 'title',
      component: 'Input',
      componentProps: {
        placeholder: '请输入名称',
      },
    },
    {
      label: '名称编码',
      dataIndex: 'dataIndex',
      component: 'Input',
      componentProps: {
        placeholder: '请输入名称编码',
      },
    },
    {
      label: '显示类型',
      dataIndex: 'displayType',
      component: 'RadioGroup',
      componentProps: () => {
        return {
          options: displayTypeList.value,
        };
      },
      format(v) {
        const info = displayTypeList.value.find((el) => el.intValue === v);

        if (info) return info.label;
        return v;
      },
    },

    {
      label: '宽度',
      dataIndex: 'width',
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入宽度',
      },
    },
    { label: '备注', dataIndex: 'remark' },
  ];

  const forms = [
    {
      label: '标签名',
      dataIndex: 'label',
      component: 'Input',
      componentProps: {
        placeholder: '请输入标签名',
      },
    },
    {
      label: '标签名编码',
      dataIndex: 'field',
      component: 'Input',
      componentProps: {
        placeholder: '请输入标签名编码',
      },
    },
    {
      class: 'w-40',
      label: '组件类型',
      dataIndex: 'componentType',
      component: 'Select',
      componentProps: () => {
        return {
          style: 'width:100%',
          allowClear: false,
          options: componentsTypeList.value,
          getPopupContainer: () => document.body,
        };
      },
      format(v) {
        const info = componentsTypeList.value.find((el) => el.intValue === v);

        if (info) return info.label;
        return v;
      },
    },
    {
      label: '读写设置',
      class: 'min-w-30 ml-2',
      dataIndex: 'updateType',
      component: 'RadioGroup',
      componentProps: {
        options: UpdateTypeList,
      },
      format(v) {
        return updateTypeMap[v];
      },
    },
    {
      dataIndex: 'labelSpan',
      label: '标签宽度',
      component: 'Slider',
      defaultValue: 3,
      class: 'w-70 px-4',
      componentProps: {
        max: 12,
        min: 0,
        marks: { 6: '6', 12: '12' },
      },
    },
    {
      dataIndex: 'colSpan',
      class: 'w-70 px-4',
      label: '行宽',
      component: 'Slider',
      defaultValue: 23,
      componentProps: {
        max: 24,
        min: 0,
        marks: { 12: '12', 24: '24' },
      },
    },
    {
      dataIndex: 'defaultValue',
      label: '初始值',
      component: 'Input',
      componentProps: {
        showSearch: true,
        placeholder: '请输入初始值',
      },
    },
  ];

  if (classify === MODEL_TYPE.FORM) {
    return forms;
  }
  return list;
};
const isTree = ({ tableType }: any) => tableType === 'tree';
const apiCodeParams = reactive({ code: '', classify: 0 });
const ListSchemas: FormSchema[] = [
  {
    field: 'title',
    label: '标题',
    required: true,
    component: 'Input',
    colProps: { span: 12 },
  },
  {
    field: 'tableType',
    label: '表格类型',
    defaultValue: 'list',
    component: 'Select',
    componentProps: {
      allowClear: false,
      options: [
        { label: '列表结构', value: 'list' },
        { label: '树形结构', value: 'tree' },
      ],
    },
    colProps: { span: 8 },
  },
  {
    field: 'parentIdField',
    label: '父级ID字段',
    defaultValue: 'parentId',
    component: 'Input',
    colProps: { span: 8 },
    ifShow: ({ values }) => isTree(values),
  },
  {
    field: 'childrenIdField',
    label: '子级ID字段',
    defaultValue: 'id',
    component: 'Input',
    colProps: { span: 8 },
    ifShow: ({ values }) => isTree(values),
  },
  {
    field: 'apiCode',
    label: '资源编码',
    component: 'ApiSelect',

    componentProps: {
      fieldNames: {
        label: 'name',
        value: 'code',
      },
      api: async (params) => {
        const ret = await getOptionsResource(params);

        ret.forEach((e) => {
          e.connName = `${e.connName} (${e.connCode})`;
        });
        return ret;
      },
      filterOption: false,
      showSearch: true,
      params: apiCodeParams,
      onSearch: useDebounceFn((v) => {
        apiCodeParams.code = v;
      }, 200),
      getPopupContainer: () => document.body,
    },
    colProps: { span: 8 },
  },
  {
    field: 'pageSize',
    label: '分页行数',
    defaultValue: 10,
    component: 'InputNumber',
    colProps: { span: 8 },
    ifShow: ({ values }) => !isTree(values),
  },

  {
    field: 'checkbox',
    label: '显示多选',
    component: 'Switch',
    colProps: { lg: 3, md: 23 },
  },
  {
    field: 'redo',
    label: '显示刷新',
    component: 'Switch',
    colProps: { lg: 3, md: 23 },
  },
  {
    field: 'setting',
    label: '显示高级设置',
    component: 'Switch',
    colProps: { lg: 5, md: 23 },
  },
  {
    field: 'modelDesc',
    label: '备注',
    component: 'InputTextArea',
    componentProps: {
      placeholder: '请输入备注',
    },
    colProps: { span: 24 },
  },
];
const FormSchemas: FormSchema[] = [
  {
    field: 'title',
    label: '表单标题',
    required: true,
    component: 'Input',
    colProps: { span: 12 },
  },
  {
    field: 'width',
    label: '表单宽度',
    required: false,
    defaultValue: '100%',
    component: 'Input',
    colProps: { span: 12 },
  },

  {
    field: 'padding',
    label: '表单内边距',
    required: false,
    component: 'Input',
    defaultValue: '16px',
    colProps: { span: 12 },
  },
  {
    field: 'layout',
    label: '表单布局',
    required: false,
    component: 'Select',
    defaultValue: 'horizontal',
    componentProps: {
      allowClear: false,
      options: [
        { label: '水平排列', value: 'horizontal' },
        { label: '垂直排列', value: 'vertical' },
        { label: '行内排列', value: 'inline' },
      ],
    },
    colProps: { span: 12 },
  },

  {
    field: 'labelAlign',
    label: '字段对齐',
    required: false,
    component: 'Select',
    defaultValue: 'right',
    componentProps: {
      options: [
        { label: '左对齐', value: 'left' },
        { label: '右对齐', value: 'right' },
      ],
    },
    colProps: { span: 12 },
  },
  {
    field: 'labelSpan',
    label: '标签宽度',
    required: false,
    component: 'Slider',
    componentProps: {
      max: 12,
      min: 1,
      marks: { 6: '6', 12: '12' },
      // tooltipVisible: true,
    },
    colProps: { span: 12 },
  },

  {
    field: 'colSpan',
    label: '行宽',
    required: false,
    component: 'Slider',
    defaultValue: 23,
    componentProps: {
      max: 24,
      min: 1,
      marks: { 12: '12', 24: '24' },
    },
    colProps: { span: 12 },
  },
  {
    field: 'isReadonly',
    label: '是否只读',
    required: false,
    defaultValue: false,
    component: 'Switch',
    colProps: { span: 12 },
  },
  {
    field: 'modelDesc',
    label: '备注',
    component: 'InputTextArea',
    componentProps: {
      placeholder: '请输入备注',
    },
    colProps: { span: 24 },
  },
];

export const basicSchemaFn = (classify: MODEL_TYPE): FormSchema[] => {
  const basicSchema: FormSchema[] = [
    {
      field: 'modelName',
      label: '模型名称',
      required: true,
      component: 'Input',
      colProps: { span: 8 },
      componentProps: {
        placeholder: '请输入模型名称',
      },
    },
    {
      field: 'modelCode',
      dynamicDisabled: true,
      label: '模型编码',
      component: 'Input',
      componentProps: {
        placeholder: '请输入模型编码',
      },
      colProps: { span: 8 },
    },

    {
      // getTableModelTypeTreeApi
      field: 'typeId',
      label: '所属分类',
      required: true,
      component: 'ApiTreeSelect',
      colProps: { span: 8 },
      componentProps: {
        placeholder: '请选择所属分类',
        api: getTableModelTypeTreeApi,
      },
    },
    {
      field: 'client',
      label: '客户端类型',
      component: 'ApiSelect',
      defaultValue: 0,
      colProps: { span: 8 },
      componentProps: {
        api: getDictTypeListApi,
        valueField: 'intValue',
        allowClear: false,
        params: {
          type: DICT.CLIENT_TYPE,
        },
      },
    },
    {
      field: 'modules',
      label: '所属模块',
      component: 'ApiTreeSelect',
      colProps: { span: 8 },
      componentProps: {
        placeholder: '请选择所属模块',
        multiple: true,
        labelField: 'name',
        valueField: 'id',
        api: getMenuTree,
      },
    },
    {
      field: 'listTemplateType',
      label: '列表模板类型',
      component: 'ApiSelect',
      required: true,
      colProps: { span: 8 },
      ifShow: ({ values }) => values.client === 1,
      componentProps: {
        api: getDictTypeListApi,
        valueField: 'intValue',
        allowClear: false,
        params: {
          type: DICT.APP_MODELCARD_TYPE_TYPE,
        },
      },
    },
    {
      field: 'meta',
      label: '列表模型meta',
      component: 'InputTextArea',
      colProps: { span: 8 },
      ifShow: ({ values }) => values.client === 1,
      defaultValue: '{}',
      componentProps: {
        rows: 4,
      },
    },
    {
      field: 'appCenterRow',
      label: '列表行数量',
      component: 'InputNumber',
      colProps: { span: 8 },
      ifShow: ({ values }) => {
        return values.listTemplateType === 1 && values.client === 1;
      },
    },
  ];

  if (classify === MODEL_TYPE.LIST) {
    basicSchema.push(...ListSchemas);
  } else {
    basicSchema.push(...FormSchemas);
  }

  return basicSchema;
};

const tableCodeParams = reactive({ tableCode: '', dataSource: '' });

export const dataSchema: FormSchema[] = [
  {
    field: 'dataSource',
    label: '数据库来源',
    component: 'ApiSelect',
    required: true,
    componentProps: {
      api: async (params) => {
        const ret = await getDBListApi(params);

        ret.forEach((e) => {
          e.connName = `${e.connName} (${e.connCode})`;
        });
        return ret;
      },
      showSearch: true,
      filterOption: (input: string, option: any) => {
        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      },
      allowClear: false,
      placeholder: '请选择数据来源',
      labelField: 'connName',
      valueField: 'connCode',
      getPopupContainer: () => document.body,
    },
    defaultValue: '__system__',
    colProps: { span: 8 },
  },
  // {
  //   required: true,
  //   field: 'tableName',
  //   label: '库表名',
  //   component: 'Input',
  //   componentProps: {
  //     placeholder: '请输入库表名',
  //   },
  //   colProps: { span: 8 },
  // },
  {
    required: true,

    field: 'tableCode',
    label: '库表编码',
    colProps: { span: 8 },
    component: 'ApiSelect',
    componentProps: ({ formModel }) => {
      tableCodeParams.dataSource = formModel.dataSource;

      return {
        api: getDBTableNamesApi,
        showSearch: true,
        filterOption: false,
        labelField: 'name',
        valueField: 'name',
        resultField: 'records',
        placeholder: '请选择库表编码',
        params: tableCodeParams,
        onSearch: useDebounceFn((v) => {
          tableCodeParams.tableCode = v;
        }, 200),
        getPopupContainer: () => document.body,
      };
    },
  },

  {
    field: 'primaryKey',
    label: '库表主键',
    required: true,
    component: 'Input',
    componentProps: {
      placeholder: '请输入库表主键',
    },
    colProps: { span: 8 },
  },

  // {
  //   field: 'defaultSort',
  //   label: '缺省排序',
  //   component: 'InputNumber',
  //   componentProps: {
  //     placeholder: '请输入缺省排序',
  //   },
  //   colProps: { span: 8 },
  // },

  {
    field: 'dataParam',
    label: '窗口参数',
    component: 'Input',
    componentProps: {
      placeholder: '请输入窗口参数',
    },
    colProps: { span: 8 },
  },
  {
    field: 'dataTempParam',
    label: '临时参数',
    component: 'InputTextArea',
    componentProps: {
      rows: 9,
      placeholder: '请输入临时参数',
    },
  },
  {
    field: 'dataCondition',
    label: '限制条件',
    component: 'CodeEditor',
    componentProps: {
      class: 'h-52',
      mode: MODE.SQL,
    },
  },
  // {
  //   field: 'dataConditionParam',
  //   label: '限制条件参数',
  //   component: 'InputTextArea',
  //   colProps: { span: 8 },
  // },

  {
    field: 'comment',
    label: '注释',
    component: 'CodeEditor',
    componentProps: {
      class: 'h-52',
      mode: MODE.SQL,
    },
  },
  {
    field: 'softDeleteCondition',
    label: '软删除条件',
    component: 'CodeEditor',
    componentProps: {
      class: 'h-52',
      mode: MODE.SQL,
    },
  },
  // {
  //   field: 'autoIncrement',
  //   label: '是否自增',
  //   defaultValue: 0,
  //   component: 'RadioGroup',
  //   componentProps: {
  //     options: [
  //       { label: '是', value: 1 },
  //       { label: '否', value: 0 },
  //     ],
  //   },
  //   colProps: { span: 8 },
  // },
];
